<template>
  <a-table
    :columns="columns"
    :row-key="item => item.id"
    :data-source="data"
    :pagination="pagination"
    :loading="loading"
    @change="handleTableChange"
  >
    <template slot="action" slot-scope="name">
      <a-button>添加</a-button>
      <a-button>编辑</a-button>
      <a-button>删除</a-button>
    </template>
  </a-table>
</template>

<script>
  const columns = [
    {
      title: '编号',
      customRender: (value,row,index) => `${index+1}`
    },
    {
      title: '图标名称',
      dataIndex: 'icon'
    },
    {
      title: '链接地址',
      dataIndex: 'path',
    },
    {
      title: '菜单名称',
      dataIndex: 'name',
    },
    {
      title: '菜单类型',
      dataIndex: 'type',
    },
    {
      title: '验证权限',
      dataIndex: 'auth',
    },
    {
      title: '菜单状态',
      dataIndex: 'status',
    },
    {
      title: '排序',
      dataIndex: 'sort',
    },
    {
      title: '操作',
      key: 'action',
    },
  ]
  export default {
    name: 'sysTable',
    data() {
      return {
        data: [],
        pagination: {},
        loading: false,
        columns,
      }
    },
    methods: {
      getList() {
        this.$api.getMenuList().then(res => {
          if (res.code == 200) {
            this.data = res.data
          }
        })
      },
      handleTableChange() {

      }
    },
    created() {
      this.getList()
    }
  }
</script>

<style scoped>

</style>
